<template>
  <Header></Header>
  <Detail :studentInfo="studentInfo"></Detail>
  <el-tabs v-model="activeName" stretch @tab-change="handleClick">
    <el-tab-pane label="个人信息" name="A"></el-tab-pane>
    <el-tab-pane label="学习科研" name="B"></el-tab-pane>
    <el-tab-pane label="奖惩助贷" name="C"></el-tab-pane>
    <el-tab-pane label="第二课堂" name="D"></el-tab-pane>
    <el-tab-pane label="书院信息" name="E"></el-tab-pane>
  </el-tabs>
  <div class="container">
    <PersonInfo :studentInfo="studentInfo" v-if="activeName === 'A'"></PersonInfo>
    <Research v-if="activeName === 'B'"></Research>
    <RewardsPunishment v-if="activeName === 'C'"></RewardsPunishment>
    <secondclass v-if="activeName === 'D'"></secondclass>
    <college v-if="activeName === 'E'"></college>
    <div v-if="activeName === 'D'"></div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue"
import { useRoute } from "vue-router"
import { getStudentInfo } from "@/api/student"
import Header from "@/components/Header.vue"
import Detail from "./Detail.vue"
import PersonInfo from "./PersonInfo.vue"
import Research from "./Research.vue"
import RewardsPunishment from "./RewardsPunishment.vue"
import secondclass from "./secondclass.vue"
import college from "./college.vue"

const studentInfo = ref({})
const route = useRoute()
const getStudentInfoImpl = async () => {
  const res = await getStudentInfo(route.params.id)
  studentInfo.value = res.data.data
  console.log("res", studentInfo)
}
const test = { name: "123", age: "345" }
const activeName = ref("A")
const handleClick = tab => {
  activeName.value = tabName
}
getStudentInfoImpl()
</script>
<style lang="scss" scoped>
.el-tabs {
  height: 60px;

  :deep(.el-tabs__header) {
    height: 100%;

    /* background: #BFC8D7; */
    .el-tabs__nav-wrap {
      height: 100%;

      .el-tabs__nav-scroll {
        height: 100%;

        .el-tabs__nav {
          height: 100%;

          .el-tabs__item {
            height: 100%;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .is-active {
            background: #2c5999;
            color: #fff;
          }
        }
      }
    }
  }
}

.container {
  width: 80%;
  margin: auto;
  padding-bottom: 100px;
}
</style>
